<template>
  <view class="page" v-cloak>
    <!-- 自定义头部 -->
    <view class="cu-custom">
      <view class="cu-bar fixed" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px',backgroundColor: 'rgba(255,255,255,'+scrollTop/100+')'}]">
        <view class="action" @tap="back">
          <text class="cuIcon-back"></text>
        </view>
        <view class="content text-333" :style="[{top: StatusBar+'px'}]" v-if="scrollTop > CustomBar">
          {{i18n['商品详情']}}
        </view>
      </view>
    </view>
    <!-- 轮播图 -->
    <view id="banners" class="banners">
      <swiper class="carousel" :indicator-dots="false" :circular="true" @change="changeSwiper">
        <block v-for="(item, index) in swipers" :key="index">
          <swiper-item @click="preview(item, swipers)">
			  <fu-image :src="item" mode="aspectFill"></fu-image>
          </swiper-item>
        </block>
      </swiper>
      <view class="pagination">{{ curSwiper }}/{{ swipers.length }}</view>
    </view>
    <!-- 悬浮Tab栏 -->
    <view class="tabs" v-if="scrollTop > CustomBar" :style="{ opacity: opacity,top: CustomBar+'px' }">
      <block v-for="item in tabs" :key="item.title">
        <view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
          <view class="tab-item" :class="{ active: curTab == item.id }">{{
            item.title
          }}</view>
        </view>
      </block>
    </view>
    <!-- 价格展示区 -->
    <view class="prices">
      <view class="price-box">
        <view class="left">
          <view>
            <view class="flex align-center">
              <view>
                <text class="text-sm" style="opacity: 0.8;">{{i18n['定金']}}</text>
                <text class="margin-left-sm text-bold">
                  <text class="text-sm text-price"></text>
                  <text class="text-xl">{{goodsInfo.deposit}}</text>
                </text>
              </view>
            </view>
            <view class="text-xs" style="opacity: 0.8;">
              <text>{{i18n['预售价']}}</text>
              <text class="margin-left-sm text-price">{{goodsInfo.price}}</text>
            </view>
          </view>
        </view>
        <view class="right" v-if="downInfo">
          <view class="text-xs">{{downInfo.title}}</view>
          <uni-countdown color="#FFFFFF" background-color="#2A3948" :day="downInfo.days" :hour="downInfo.hours" :minute="downInfo.minutes"
            :second="downInfo.seconds" @timeup="countOver"></uni-countdown>
        </view>
      </view>
    </view>
    <!-- 商品信息展示区 -->
    <view class="infos padding bg-white">
      <view class="flex justify-between align-center">
        <view class="text-lg text-333 word-break-all text-bold">{{ goodsInfo.name }}</view>
        <view class="margin-left flex flex-direction align-center justify-center" style="width: 100rpx;min-width: 100rpx;"
          @tap="collect">
          <text v-if="goodsInfo.is_collect" class="cuIcon-likefill text-theme"></text>
          <text v-else class="cuIcon-like"></text>
          <text class="text-xs text-333 " :class="{ 'text-theme': goodsInfo.is_collect }">{{ goodsInfo.is_collect ? i18n["已收藏"] : i18n["收藏"] }}</text>
        </view>
      </view>
      <view class="margin-top-sm text-sm text-999 word-break-all text-cut-3">{{ goodsInfo.description }}</view>
      <view class="margin-top-sm text-sm text-999">
        <text>{{i18n['库存']}}: {{ goodsInfo.totalStock }}</text>
        <text class="margin-left">{{i18n['销量']}}: {{ goodsInfo.sales_sum }}</text>
      </view>
    </view>
    <!-- 预售说明 -->
    <view class="margin-top-sm bg-white radius-20 padding-lr">
      <view class="list-item">
        <view class="title">{{i18n['尾款']}}</view>
        <view class="content solid-bottom">
          <view class="flex flex-direction justify-center" style="line-height: 36rpx;">
            <view class="text-price fu-cred text-bold">{{goodsInfo.balance}}</view>
            <view class="text-sm">({{presell_stime}} - {{presell_etime}})</view>
          </view>
        </view>
      </view>
      <view class="list-item">
        <view class="title">{{i18n['流程']}}</view>
        <view class="content solid-bottom text-sm">
          <text>1.{{i18n['付定金']}}－2.{{i18n['付尾款']}}－3.{{i18n['发货']}}</text>
        </view>
      </view>
    </view>
    <!-- 规格,地址,服务,参数 -->
    <view class="margin-top-sm bg-white radius-20 padding-lr">
      <!-- 规格 -->
      <view class="list-item" @tap="openPopup('specs')" v-if="goodsInfo.is_spec">
        <view class="title">{{i18n['规格']}}</view>
        <view class="content solid-bottom">
          <view class="mes text-df text-333 text-cut"><text v-if="sku_name">{{ sku_name }}，</text>{{ goodsInfo.number }}{{i18n['件']}}</view>
          <view class="icon">
            <text class="cuIcon-right text-999" style="font-size: 24rpx"></text>
          </view>
        </view>
      </view>
      <!-- 优惠 -->

      <!-- 地址 -->
      <view class="list-item" @tap="switchAddress" v-if="curAddr">
        <view class="title">{{i18n['送至']}}</view>
        <view class="content solid-bottom">
          <view class="mes text-df text-333 text-cut">
            <text class="cuIcon-locationfill fu-cred"></text>
            <text class="margin-left-xs">{{ curAddr.province }}{{ curAddr.city }}{{ curAddr.district
              }}{{ curAddr.address }}</text>
          </view>
          <view class="icon">
            <text class="cuIcon-right text-999" style="font-size: 24rpx"></text>
          </view>
        </view>
      </view>
    </view>
    <!-- 评价展示区 -->
    <view id="evaluates" class="evaluates margin-top-sm radius-20 bg-white padding-lr">
      <view class="title flex justify-between align-center">
        <text class="text-bold">
          <text class="text-lg text-333">{{i18n['商品评价']}}</text>
          <text class="text-333 text-df margin-left-xs">({{ comment_total }})</text>
        </text>
        <text @tap="navToComment">
          <text class="text-sm text-999">{{i18n['查看全部']}}</text>
          <text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
        </text>
      </view>
      <view class="content" v-if="comment.length > 0">
        <block v-for="(item, index) in comment" :key="index">
          <fu-evaluate :prop="item"></fu-evaluate>
        </block>
      </view>
    </view>
    <!-- 商品详情 -->
    <view id="details" class="details radius-20 bg-white margin-top-sm">
      <view class="title">
        <view class="icon icon1"></view>
        <view class="margin-lr">{{i18n['商品详情']}}</view>
        <view class="icon icon2"></view>
      </view>
      <view class="word-break-all">
        <jyf-parser :html="body"></jyf-parser>
      </view>
    </view>
    <!-- 底部菜单 -->
    <view class="tools">
      <view class="toolbar">
        <view class="left">
          <view class="left-item" @tap="navToServer">
            <image class="block-32" :src="imgWechatUrl+'/activity/007.png'" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['客服']}}</text>
          </view>
          <view class="left-item" @tap="navToCart">
            <image class="block-32" :src="imgWechatUrl+'/activity/008.png'" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['购物车']}}</text>
          </view>
          <view class="left-item" @tap="openPopup('share')">
            <image class="block-32" :src="imgWechatUrl+'/activity/006.png'" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['分享']}}</text>
          </view>
        </view>
        <view class="right">
          <view class="btn" @tap="openPopup('specs', 'buy')">
            <text class="text-df">{{i18n['支付定金']}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 优惠券弹窗 -->
    <!-- <ben-coupon ref="coupon"></ben-coupon> -->
    <!-- 地址弹窗 -->
    <fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
    <!-- 分享弹窗 -->
    <fu-share ref="share" :info="shareInfo" @getPosterInfo="getShareCode"></fu-share>
    <!-- 规格弹窗 -->
    <fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo" :limit="limit"
      @changeNumber="setNumber" @changeSpec="setSpec" @buyNow="buyNow"></fu-specs-popup>
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
  import richText from "@/common/utils/richText.js";
  import {SHAREURL} from '@/common/config.js';
  import fuEvaluate from "../../components/fu-evaluate/fu-evaluate.vue";
  import fuGoodsAddress from "../../components/fu-goods-address/fu-goods-address.vue";
  import fuSpecsPopup from "../../components/fu-specs-popup/fu-specs-popup.vue";
  export default {
    components: {
      fuEvaluate,
      fuGoodsAddress,
      fuSpecsPopup
    },
    data() {
      return {
				imgWechatUrl:this.imgWechatUrl,
        curSwiper: 1, // 当前轮播图index
        tabs: [{
            title: global.i18n["商品"],
            id: "banners",
          },
          {
            title: global.i18n["评价"],
            id: "evaluates",
          },
          {
            title: global.i18n["详情"],
            id: "details",
          },
          // {
          //   title: '推荐',
          //   id: 'recoms',
          // }
        ],
        StatusBar: this.StatusBar,
        CustomBar: this.CustomBar,
        curTab: "banners",
        scrollTop: 0,
        opacity: 0,
        swipers: [], // 轮播图
        goodsInfo: {}, // 商品信息
        spec_list: [], // 规格列表
        sku_list: [], // 规格参照列表
        sku_id: 0, // 当前规格id
        sku_name: "", //  当前规格名称
        goods_id: 0, // 商品id
        activity_id: 0,
        body: "", // 商品介绍
        comment: [], // 评论列表
        comment_total: 0, // //评论条数
        activityInfo: null, // 活动信息
        limit: 0, // 限购数量
        addrs: [],
        curAddr: null,
        downInfo: null,
        teamList: [], // 拼团列表
        join_number: 0,
        isActivity: true,
        presell_stime: null, // 付尾款开始时间
        presell_etime: null, // 付尾款结束时间
        shareCode: '',
      };
    },
    computed: {
      shareInfo() {
        return {
          goods_id: this.goods_id,
          sku_id: this.sku_id,
          goodsName: this.goodsInfo.name,
          goodsImage: this.swipers[0],
          thumb: this.goodsInfo.thumb,
          summary: this.goodsInfo.description,
          price: this.goodsInfo.price,
          market_price: this.goodsInfo.market_price,
          avatar: global.userInfo && global.userInfo.head_img || '',
          name: global.userInfo && global.userInfo.user_name || '',
          href: SHAREURL +
            `?goods_id=${this.goods_id}&sku_id=${this.sku_id || 0}&activity_id=${this.activity_id || 0}&type=share`, // H5地址
          code: this.shareCode, // 二维码
        };
      },
    },
    onLoad(options) {
      const {
        goods_id,
        activity_id = 0,
        sku_id = 0,
        scene,
        type
      } = options;
      if (scene) {
        const params = decodeURIComponent(options.scene);
        params.split("&").forEach((item, index) => {
          switch (index) {
            case 0:
              id = item.split("=")[1];
              break;
            case 1:
              activity_id = item.split("=")[1];
              break;
            case 2:
              sku_id = item.split("=")[1];
              break;
            case 3:
              invite_code = item.split("=")[1];
              break;
          }
        });
        type = "share";
      }
      this.goods_id = goods_id;
      this.sku_id = sku_id;
      this.activity_id = activity_id;
      if (type) {
        this.openModel = "share";
      }
      this.loadData();
    },
    onShow() {
      if (global.token) {
        this.loadAddress();
      }
    },
     onPageScroll(e) {
      let top = e.scrollTop;
      let navH = 115 + this.StatusBar;
      this.scrollTop = top;
      this.opacity = (top / 100).toFixed(2);
      if (top >= 0 && top <= this.tabs[1].top - navH) {
        this.curTab = 'banners';
      } else if (top >= this.tabs[1].top - navH && top < this.tabs[2].top - navH) {
        this.curTab = 'evaluates';
      } else if (top >= this.tabs[2].top - navH) {
        this.curTab = 'details';
      }
    },
    onShareAppMessage() {
      return {
        title: this.goodsInfo.name,
        path: `/pages/goods/goodsdetail/goods-detail/index?goods_id=${this.goods_id}&sku_id=${this.sku_id}&type=share`,
        imageUrl: this.goodsInfo.thumb,
      };
    },
    methods: {
      /**
			 * @event
			 * @description  点击图片放大
			 * @param {String} item 当前图片url
			 * @param {Array} urls 图片url
			 */
			preview(item, urls) {
				uni.previewImage({
					current: item,
					urls: urls
				});
			},
      // 返回
      back() {
        if (this.openModel == 'share') {
          uni.switchTab({
            url: '/pages/tab/home/shopindex/index'
          })
        } else {
          uni.navigateBack();
        }
      },
      // 轮播图切换
      changeSwiper(e) {
        this.curSwiper = e.detail.current + 1;
      },
      // 获取地址
      loadAddress() {
        this.$api.post(global.apiUrls.getUserAddressAddressList).then((res) => {
          console.log("地址列表", res);
          if (res.data.code == 1) {
            this.addrs = res.data.data;
          }
        });
      },
      // tab栏切换
      changeTab(item) {
        this.curTab = item.id;
        let nowScrollTop = this.scrollTop;
        uni
          .createSelectorQuery()
          .in(this)
          .select("." + item.id)
          .boundingClientRect((pos) => {
            let posTop = pos.top;
            if (posTop == 0 && nowScrollTop != 0) return;
            uni.pageScrollTo({
              duration: 0,
              scrollTop: posTop + nowScrollTop - 100 - this.StatusBar,
            });
          })
          .exec();
      },
      // 打开弹窗
      openPopup(type, param) {
        this.$refs[type].open(param);
      },
      // 获取商品详情
      loadData() {
        this.$api
          .get(global.apiUrls.getGoodsDetail, {
            goods_id: this.goods_id,
            is_cache: 1,
            activity_id: this.activity_id,
            user_id: (global.userInfo && global.userInfo.id) || 0,
          })
          .then((res) => {
            if (res.data.code == 1) {
              console.log("goods detail", res.data.data);
              let data = res.data.data;
              this.swipers = data.images;
              this.goodsInfo = {
                name: data.name,
                price: data.shop_price,
                activity_price: data.activity_price,
                market_price: data.market_price,
                thumb: data.thumb,
                description: data.description,
                is_collect: data.is_collect,
                number: 1,
                stock: data.activity_stock || data.stock || 0,
                totalStock: data.activity_stock || data.stock || 0,
                sales_sum: data.sales_sum || 0,
                is_spec: data.is_spec,
                deposit: data.deposit,
                balance: data.balance,
                goods_label: data.goods_label,
                goods_label_activity: data.goods_label_activity,
                goods_label_service: data.goods_label_service,
                praise_rate: data.praise_rate,
                freight_price: data.freight_price,
                member_price: data.member_price,
                shop_price: data.shop_price,
                activity_type: data.activity_info.activity_type,
                activity_price: data.activity_price,
                member_activity_price: data.member_activity_price,
              };
              console.log("goodsInfo", this.goodsInfo);
              this.limit = data.limit || 0;
              this.body = richText.format(data.body.trim());
              this.comment = data.comment || [];
              this.comment_total = data.comment_total || 0;
              if (data.is_spec == 1) {
                this.spec_list = data.activity_spec_list;
                this.sku_list = Object.values(data.activity_sku_list)
                  .map((item) => {
                    item.sku_spec = item.key.split("_");
                    return item;
                  })
                  .filter((item) => {
                    return item.stock > 0;
                  });
              }
              if (data.activity_info && data.activity_info.activity_type != 0) {
                this.presell_stime = data.activity_info.presell_stime;
                this.presell_etime = data.activity_info.presell_etime;
                this.initDownTime(data.activity_info.surplus_time);
              }

              uni.stopPullDownRefresh();
              this.$nextTick(() => {
                this.computedPosTop();
                if (data.is_spec == 1) {
                  setTimeout(() => {
                    this.$refs.specs.init();
                  },100)
                }
              });
            } else {
              this.$message.info(this.i18n["获取详情失败"]);
              setTimeout(() => {
                uni.navigateBack();
              }, 300);
            }
          });
      },
      // 初始化倒计时
      initDownTime(time) {
        time = Number(time);
        if (time > 0) {
          let timeInfo = this.$util.downTime(time * 1000);
          this.downInfo = {
            title: this.i18n['据预售结束']+':',
            days: timeInfo.days,
            hours: timeInfo.hours,
            minutes: timeInfo.minutes,
            seconds: timeInfo.seconds,
          }
        }
      },
      // 计算锚点位置
      computedPosTop() {
        const query = uni.createSelectorQuery().in(this);
        this.tabs.forEach((item, index) => {
          query.select('#' + item.id).boundingClientRect(data => {
            this.$set(this.tabs[index], 'top', data.top);
          }).exec();
        })
      },
      // 收藏
      collect() {
        this.$util.actionAuth(() => {
          this.$api
            .post(global.apiUrls.postGoodsCollection, {
              collect_id: this.goods_id,
              sku_id: this.sku_id,
              collect_title: this.goodsInfo.name,
              type: 1,
            })
            .then((res) => {
              if (res.data.code == 1) {
                console.log("collect", res.data);
                if (this.goodsInfo.is_collect) {
                  this.goodsInfo.is_collect = 0;
                } else {
                  this.goodsInfo.is_collect = 1;
                }
                this.$message.info(res.data.msg);
              }
            });
        });
      },
      // 修改购买数量
      setNumber(num) {
        this.goodsInfo.number = num;
      },
      // 修改购买规格
      setSpec(skuInfo) {
        const {
          key_name,
          shop_price,
          market_price,
          sku_id,
          stock,
          deposit,
          balance,
          thumb,
        } = skuInfo;
        this.sku_id = sku_id;
        this.sku_name = key_name;
        this.goodsInfo.price = shop_price;
        this.goodsInfo.stock = stock;
        this.goodsInfo.stock = stock;
        thumb && (this.goodsInfo.thumb = thumb);
        this.goodsInfo.balance = balance;
      },
      // 立即购买
      buyNow() {
        this.$util.actionAuth(() => {
          if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
          let data = {
            type: "buy",
            goods_id: this.goods_id,
            number: this.goodsInfo.number,
          };
          if (this.isActivity) {
            data.activity_id = this.activity_id;
          } else {
            data.activity_id = 0;
          }
          if (this.sku_id) {
            data.sku_id = this.sku_id;
          }
          if (this.curAddr) {
            data.address_id = this.curAddr.address_id;
          }
          if (this.TeamId) {
            data.teamId = this.TeamId;
          }
          this.$urouter.navigateTo({
            url: "/pages/order/order-process/confirm-order/index",
            params: data,
          });
        });
      },
      // 去拼单
      joinTeam(item) {
        this.$util.actionAuth(() => {
          this.isActive = true;
          this.TeamId = item.id;
          this.openPopup("specs", 'buy');
        })
      },
      // 发起拼单
      launchTeam() {
        this.$util.actionAuth(() => {
          this.isActive = true;
          this.TeamId = 0;
          this.openPopup("specs", 'buy');
        })
      },
      // 单独购买
      aloneBuy() {
        this.$util.actionAuth(() => {
          this.isActive = false;
          this.TeamId = 0;
          this.openPopup("specs", 'buy');
        })
      },
      // 倒计时结束回调
      countOver() {
        this.loadData();
      },
      // 选择地址
      switchAddress() {
        this.$util.actionAuth(() => {
          this.openPopup("address");
        });
      },
      // 去评价列表
      navToComment() {
        if (this.comment_total == 0)
          return this.$message.info(this.i18n["该商品暂无评论"]);
        this.$urouter.navigateTo({
          url: "/pages/goods/goodsdetail/goods-comment/index",
          params: {
            goods_id: this.goods_id,
          },
        });
      },
      // 改变收货地址
      changeAddress(e) {
        this.curAddr = e;
        this.$refs.address.close();
      },
      // 去购物车
      navToCart() {
        this.$urouter.switchTab("/pages/tab/cart/cart-page/index");
      },
      // 客服
      navToServer() {
        this.$urouter.navigateTo({
          url: "/pages/service-message/service/service-detail/index",
          params: {
            kid: 1,
            goods_id: this.goods_id,
            activity_id: this.activity_id || 0
          },
        });
      },
      // 分享海报信息
      setPosterInfo(codePath) {
        this.$refs.share.init({
          goodsName: this.goodsInfo.name,
          goodsImage: this.swipers[0],
          price: this.goodsInfo.price,
          market_price: this.goodsInfo.market_price,
          avatar: global.userInfo.head_img,
          name: global.userInfo.user_name,
        });
      },
      // 获取二维码
      getShareCode() {
        // #ifdef MP-WEIXIN
        let data = {
          a: this.goods_id,
          b: this.activity_id || 0,
          c: this.sku_id || 0,
        };
        console.log("我分享的参数", data);
        let dataStr = this.$util.serialize(data);
        let page = 'pages/activity/advance/advance-detail/index';
        this.$api.post(global.apiUrls.postShareCode, {
          page: page,
          scene: dataStr,
          width: 180,
        }).then(res => {
          console.log('分享二维码', res);
          if (res.data.code == 1) {
            let data = res.data.data.base64;
            this.$util.base64ToPath(data).then(res => {
              console.log('图片临时路径', res);
              this.shareCode = res;
              this.$refs.share.init();
            }).catch(err => {
              console.log('保存临时二维码失败', err);
              this.$message.info(this.i18n['保存临时二维码失败']);
            })
          } else {
            this.$message.info(this.i18n['获取分享二维码失败']);
          }
        }).catch(err => {
          console.log('获取分享二维码失败', err);
        })
        // #endif
        // #ifndef MP-WEIXIN
        this.$api.post(global.apiUrls.postAppShareCode, {
          goods_id: this.goods_id,
          activity_id: this.activity_id || 0,
          sku_id: this.sku_id || 0,
        }).then(res => {
          let data = res.data;
          console.log('Appfenxiang ', data);
          if (data.code == 1) {
            let url = data.data.qrcode_url;
            console.log('二维码路径', url);
            this.shareCode = url;
            this.$refs.share.init();
          } else {
            this.$message.info(this.i18n['获取分享二维码失败']);
          }
        }).catch(err => {
          console.log(err);
        })
        // #endif
      },
    },
    onPullDownRefresh() {
      this.loadData();
    },
  };
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100%;
    padding-bottom: 100rpx;
    padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  }

  .banners {
    height: 750rpx;
    position: relative;

    .carousel {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .pagination {
      width: 80rpx;
      height: 40rpx;
      border-radius: 40rpx;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      right: 32rpx;
      bottom: 32rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background-color: #ffffff;
    box-shadow: 0 6rpx 4rpx rgba(0, 0, 0, 0.06);
    display: flex;
    z-index: 999;

    .tab-item {
      height: 100%;
      line-height: 88rpx;
      font-size: 28rpx;
      color: #999999;
      border-bottom: 4rpx solid white;
    }

    .tab-item.active {
      color: #333333;
      font-size: 32rpx;
      border-bottom-color: $fu-main-color;
    }
  }

  .prices {
    height: 112rpx;
    background-color: #ffffff;

    .price-box {
      position: relative;
      top: -20rpx;
      display: flex;

      .left {
        height: 112rpx;
        flex: 1;
        background: #ff2742;
        padding-left: 32rpx;
        display: flex;
        align-items: center;
        border-top-left-radius: 24rpx;
        color: #FFFFFF;
      }

      .right {
        height: 112rpx;
        background-color: #FFECCE;
        background-image: url($IMG_WECHAT_URL +'/activity/price-bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        padding: 0 32rpx 0 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-top-right-radius: 24rpx;
      }
    }
  }

  .infos {
    border-radius: 0 0 20rpx 20rpx;
  }

  .list-item {
    height: 112rpx;
    line-height: 112rpx;
    display: flex;

    .title {
      width: 100rpx;
      min-width: 100rpx;
      font-size: 32rpx;
      color: #333333;
      font-weight: bold;
    }

    .content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      overflow: hidden;

      .mes {
        flex: 1;
      }

      .icon {
        width: 50rpx;
        min-width: 50rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }

  .evaluates {
    .title {
      height: 100rpx;
    }
  }

  .shopinfos {
    .title {
      height: 260rpx;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 30rpx;
      border-radius: 20rpx 20rpx 0 0;

      .tag {
        padding: 5rpx 10rpx;
        font-size: 16rpx;
        background-color: rgba(255, 0, 0, 0.6);
        border-radius: 100rpx;
        color: #ffffff;
      }

      .tag+.tag {
        margin-left: 10rpx;
      }

      .action {
        width: 160rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 60rpx;
        background-color: rgba(0, 0, 255, 0.3);
        color: #ffffff;
        font-size: 24rpx;
      }
    }

    .recommend {
      .wrap {
        width: 100%;

        .list {
          display: flex;
          align-props: flex-start;

          .goods-item+.goods-item {
            margin-left: 20rpx;
          }
        }
      }
    }
  }

  .details {
    .title {
      height: 120rpx;
      font-size: 40rpx;
      color: #333333;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        width: 60rpx;
        height: 28rpx;
        background-size: contain;
        background-repeat: no-repeat;
      }

      .icon1 {
        background-image: url($IMG_WECHAT_URL +"/activity/left.png");
      }

      .icon2 {
        background-image: url($IMG_WECHAT_URL +"/activity/right.png");
      }
    }
  }

  .tools {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #ffffff;
    box-shadow: 0px -1px 0px #eeeeee;
    z-index: 999;

    .toolbar {
      height: 100rpx;
      display: flex;

      .left {
        flex: 1;
        padding-left: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-item {
          display: flex;
          flex-direction: column;
          font-size: 18rpx;
          color: #333333;
          align-items: center;
        }
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 32rpx;
        .btn {
          width: 400rpx;
          height: 80rpx;
          text-align: center;
          color: #ffffff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          line-height: 1.3;
          border-radius: 80rpx;
          background: $bgtheme;
        }
      }
    }
  }

  .block-30 {
    width: 30rpx;
    height: 28rpx;
  }

  .block-32 {
    width: 32rpx;
    height: 32rpx;
  }

  .radius-20 {
    border-radius: 20rpx;
  }

  .block-90 {
    width: 90rpx;
    height: 90rpx;
    min-width: 90rpx;
    min-height: 90rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .block-220 {
    width: 220rpx;
    height: 220rpx;
    min-width: 220rpx;
    min-height: 220rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .text-through {
    text-decoration: line-through;
  }

  .word-break-all {
    word-break: break-all;
  }
</style>
